<template>


        <div class="super_container">

                <myheader :total_price="total" :count='count'></myheader>
            
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Cart</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li>Your Cart</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Cart -->

	<div class="cart_section">
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="cart_container">
							
							<!-- Cart Bar -->
							<div class="cart_bar">
								<ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-start">
									<li>Product</li>
									<li>Price</li>
									<li>Quantity</li>
									<li>Total</li>
								</ul>
							</div>

							<!-- Cart Items -->
							<div class="cart_items">
								<ul class="cart_items_list"  >

									<!-- Cart Item -->
									<li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start" v-for='(g,index) in datalist'>
										<div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
											<div><div class="product_image"><img :src="getImgurl(g.image)" alt=""></div></div>
											<div class="product_name"><router-link :to="list(g.id)">{{ g.name }}</router-link></a></div>
										</div>
									
										<div class="product_price text-lg-center product_text"><span>Price: </span>${{ g.price }}</div>
										<div class="product_quantity_container">
											<div class="product_quantity ml-lg-auto mr-lg-auto text-center">
												<span class="product_text product_num">{{ g.num }}</span>
												<div class="qty_sub qty_button trans_200 text-center"  @click="minus(index)"><span>-</span></div>
												<div class="qty_add qty_button trans_200 text-center" @click="add(index)"><span>+</span></div>
											</div>
										</div>
										<div class="product_total text-lg-center product_text"><span>Total: </span>${{g.price * g.num}}</div>
									</li>
								</ul>
							</div>

							<!-- Cart Buttons -->
							<div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
								<div class="cart_buttons_inner ml-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
									<div class="button button_continue trans_200"><a href="categories.html">continue shopping</a></div>
									<div class="button button_clear trans_200"><a href="categories.html">clear cart</a></div>
									<div class="button button_update trans_200"><router-link :to="'order'">To settle accounts</router-link></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="section_container cart_extra_container">
			<div class="container">
				<div class="row">

					<!-- Shipping & Delivery -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_1">
							
						</div>
					</div>

					<!-- Cart Total -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_2" style="margin-top:0px;">
							<div class="cart_extra_content cart_extra_total" style="width:600px;">
								<div class="cart_extra_title">Cart Total</div>
								<ul class="cart_extra_total_list">
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Subtotal</div>
										<div class="cart_extra_total_value ml-auto">$29.90</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Shipping</div>
										<div class="cart_extra_total_value ml-auto">Free</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Total</div>
										<div class="cart_extra_total_value ml-auto">${{ total }}</div>
									</li>
								</ul>
								<div class="checkout_button trans_200"><router-link :to="'order'">proceed to checkout</router-link></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
      
      export default {
        data () {
          return {
            msg: "这是一个变量",
            datalist:[],
            coupon:'',
            goodslist:[],
            imgslist:[],
			count:0,
			total:0,
            clicked:0,
            upath: '',
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){
            
            this.common.get_menu();
            let id = this.$route.query.id
			var data = Cookies.get('cart')
			if (data){
				data = JSON.parse(data)
				this.datalist = data;
				console.log(this.datalist)
				this.total_price()
			}
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			list:function(id){
                var list_url = '/product?id='
                var url = list_url+id;
                return url;
            },
			getImgurl:function(image){
                let image_url = this.base_url+'/static/upload/'
                let url = image_url+image
                console.log(url)
                return url
            },
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},
			// 存入redis
            post_redis:function(){
				var add_cart_redis = this.base_url + '/add_cart_redis'
				var token = localStorage.getItem('token')
				var username = Cookies.get('username')
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist),
					'token':token,
					'username':username,
				}
                this.axios.post(add_cart_redis,this.qs.stringify(params))
                .then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}
                }); 
            },
			add:function(index){
				this.datalist[index].num++;
				console.log(this.datalist)
        		Cookies.set('cart',this.datalist,{ expires: 7 })
				this.total_price()
            	this.post_redis()
			},
			minus:function(index){
				if( this.datalist[index].num > 0){
				this.datalist[index].num--;
        		Cookies.set('cart',this.datalist,{ expires: 7 })
				this.total_price()
            	this.post_redis()
			}
		}
        }
      }
      
      
      </script>
       
      <style>
			
			@import '../assets/styles/cart.css';
			@import '../assets/styles/cart_responsive.css';
      
      </style>